<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <!-- <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire> -->
  <div class="container">
    <div class="item">
      <img src="../../assets/img/custom/icon-bg.png" alt="" class="bg" />
      <div class="main">
        <img src="../../assets/img/custom/icon1@2x.png" alt="" class="icon" />
        <div class="info">
          <div class="num"><span>132</span>间</div>
          <div class="text">实验室数量</div>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="../../assets/img/custom/icon-bg.png" alt="" class="bg" />
      <div class="main">
        <img src="../../assets/img/custom/icon2@2x.png" alt="" class="icon" />
        <div class="info">
          <div class="num"><span>869</span>台</div>
          <div class="text">仪器数量</div>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="../../assets/img/custom/icon-bg.png" alt="" class="bg" />
      <div class="main">
        <img src="../../assets/img/custom/icon3@2x.png" alt="" class="icon" />
        <div class="info">
          <div class="num"><span>15</span>人</div>
          <div class="text">教授人数</div>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="../../assets/img/custom/icon-bg.png" alt="" class="bg" />
      <div class="main">
        <img src="../../assets/img/custom/icon4@2x.png" alt="" class="icon" />
        <div class="info">
          <div class="num"><span>1526</span>㎡</div>
          <div class="text">实验室面积</div>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="../../assets/img/custom/icon-bg.png" alt="" class="bg" />
      <div class="main">
        <img src="../../assets/img/custom/icon5@2x.png" alt="" class="icon" />
        <div class="info">
          <div class="num"><span>1312.8</span>万</div>
          <div class="text">仪器总资产</div>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="../../assets/img/custom/icon-bg.png" alt="" class="bg" />
      <div class="main">
        <img src="../../assets/img/custom/编组 3@2x.png" alt="" class="icon" />
        <div class="info">
          <div class="num"><span>228</span>人</div>
          <div class="text">实验室人数</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api/modules"
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0,
      },
      pageflag: true,
      timer: null,
    }
  },
  created() {
    this.getData()
  },
  mounted() {},
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false

      currentGET("big1").then(res => {
        //只打印一次
        if (!this.timer) {
          console.log("设备总览", res)
        }
        if (res.success) {
          this.countUserNumData = res.data
          this.$nextTick(() => {
            this.init()
          })
        } else {
          this.pageflag = false
          this.$Message({
            text: res.msg,
            type: "warning",
          })
        }
      })
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = a => {
        this.getData()
      }
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
      let myChart = this.$refs.charts.chart
      myChart.on("mouseover", params => {
        this.clearData()
      })
      myChart.on("mouseout", params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
      })
    },
    init() {
      let total = this.countUserNumData.totalNum
      let colors = ["#ECA444", "#33A1DB", "#56B557"]
      let piedata = {
        name: "用户总览",
        type: "pie",
        radius: ["42%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },

        color: colors,
        data: [
          // {
          //   value: 0,
          //   name: "告警",
          //   label: {
          //     shadowColor: colors[0],
          //   },
          // },
          {
            value: this.countUserNumData.lockNum,
            name: "锁定",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.countUserNumData.onlineNum,
            name: "在线",
            label: {
              shadowColor: colors[2],
            },
          },
          {
            value: this.countUserNumData.offlineNum,
            name: "离线",
            label: {
              shadowColor: colors[1],
            },
          },
        ],
      }
      this.options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,
            },
            emphasis: {
              show: true,
            },
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等分 */
  grid-template-rows: auto auto; /* 自动高度 */
  .item {
    position: relative;
    width: 168px;
    height: 115px;
    .bg {
      position: absolute;
      width: 110%;
      height: 110%;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .main {
      width: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 5px 0 5px 0;

      .icon {
        position: relative;
        z-index: 2;
        width: 60px;
        height: 115px;
        margin-left: 10px;
      }
      .info {
        position: relative;
        z-index: 2;
        color: #fff;
        box-sizing: border-box;

        .num {
          span {
            color: #fff;
            font-size: 20px;
          }
          font-size: 14px;
        }
        .text {
          color: #fff;
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
